<template>
	<view class="container">
		<z-paging ref="paging" v-model="assetsData" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" @query="queryList">
			<!-- 上部分头像卡片 -->
			<view class="user_card">
				<view class="user_info">
					<!-- 头像 -->
					<view class="user_avatar">
						<image :src="customerInfo.avatar || defaultAvatar" mode=""></image>
					</view>
					<!-- 信息 -->
					<view class="user_conent">
						<!-- title -->
						<view class="user_title">{{customerInfo.nickname}}</view>
						<!-- info -->
						<text>{{customerInfo.walletAddress}}</text>
					</view>
				</view>
				<!-- 个人介绍 -->
				<view class="user_introduce">
					<u-read-more :showHeight="40" closeText="展开" :toggle="true" :shadowStyle="shadowStyle"
						color="var(--echo-main-color)">
						<rich-text :nodes="content"></rich-text>
					</u-read-more>
				</view>
			</view>
			<!-- 粉丝信息 -->
			<view class="fans">
				<view class="">
					<view class="num">1000</view>
					<view class="">获赞</view>
				</view>
				<view class="">
					<view class="num">1000</view>
					<view class="">粉丝</view>
				</view>
				<view class="">
					<view class="num">0</view>
					<view class="">已关注</view>
				</view>
			</view>
			<view class="focus">
				<u-button text="关注" color="var(--echo-main-color)" shape="circle" size="small"></u-button>
			</view>
			<!-- 下部分产品卡片 -->
			<view class="product_card">
				<view style="z-index: 100;position: sticky;top :0; background: #fff;">
					<!-- 头部安全距离 -->
					<view class="status_bar"></view>
					<u-tabs :list="productCardList" @click="handleTopList" lineColor="var(--echo-main-color)"
						:activeStyle="{color: 'var(--echo-main-color)'}" :inactiveStyle="{color: '#999'}"
						:scrollable="false">
					</u-tabs>
				</view>
				<view class="nft_lists_card">
					<BsinNftCard nftNameColor="#333" background="rgb(241, 241, 241)" v-for="(item, index) in assetsData"
						:key="index" :item="item" @toDetail="toDetail">
					</BsinNftCard>
				</view>
			</view>
		</z-paging>
	</view>
</template>
<script>
	import {
		getCustomerDetail,
		getMyDigitalAssets
	} from '@/config/customer.js';

	export default {
		data() {
			return {
				defaultAvatar: 'https://ipfs.s11edao.com/ipfs/QmQKqCed4mH1fRdNRXdxiDFnfwihWCPqc53JLxuWPQ3iq6',
				customerInfo: {},
				content: "",
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "30rpx",
				},
				productCardList: [{
						name: '资产',
					},
					{
						name: '贡献',
					},
					{
						name: '状态',
					}
				],
				tabShowType: 0,
				assetsData: []
			}
		},
		async onLoad({
			customerNo
		}) {
			var res = await getCustomerDetail({
				customerNo
			});
			this.customerInfo = res.data?.customerInfo;
		},
		methods: {
			load() {
				this.$refs.uReadMore.init();
			},

			tabChange(item) {
				this.tabIndex = item.index
			},

			queryList(pageNo, pageSize) {
				// 调用查询nft接口
				this.getCustomerWalletInfo()
			},

			// 查询资产信息
			getCustomerWalletInfo() {
				getMyDigitalAssets({
					customerNo: this.customerInfo.customerNo
				}).then(res => {
					this.$refs.paging.complete(res.data.nftInfo);
				})
			},


			// tabs切换
			handleTopList({
				index
			}) {
				this.tabShowType = index
				this.$refs.paging.reload()
			},

			// nft详情
			toDetail() {
				uni.navigateTo({
					url: "/pages/My/MyNftDetail"
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	.container {
		color: #333;

		.user_card {
			padding: 0 30rpx 10rpx;
			background-image: url('https://ipfs.s11edao.com/ipfs/QmcXUtWDL3qDTSaBLK3DJFcCEsqiE2xUNwC7KroW1ceuoc');
			background-size: 100% 100%;

			.user_info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 140rpx;

				.user_avatar {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.user_conent {
					margin-left: 40rpx;
					flex-grow: 1;

					.user_title {
						font-size: $echo-font-size-title;
						margin-bottom: 10rpx;
						font-weight: 700;
					}
				}
			}

			.user_introduce {
				margin: 30rpx 0;

				uni-rich-text {
					text-indent: 0em !important;
				}
			}
		}

		.fans {
			padding: 0 100rpx;
			padding-top: 40rpx;
			display: flex;
			justify-content: space-between;
			text-align: center;

			view {
				color: #999;
			}

			.num {
				margin-bottom: 20rpx;
			}
		}

		.focus {
			width: 400rpx;
			margin: 30rpx auto;
			margin-bottom: 10rpx;
		}

		.product_card {

			// 顶部安全距离
			.status_bar {
				height: var(--status-bar-height);
			}

			.nft_lists_card {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 30rpx;
			}
		}

		::v-deep .u-tabs__wrapper__nav__line {
			display: none;
		}
	}
</style>
